<template>
    <div>
        <h2 class="h2"><span>军籍信息表--烈士遗属,因公牺牲遗属,病故军人遗属</span></h2>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm qita" id="qita" accept-charset="UTF-8">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item class="select2" label="现单位性质(含离退休前)：" prop="E007">
                            <el-select v-model="ruleForm.E007" placeholder="现单位性质(含离退休前)">
                                <el-option label="国家机关" value="1"></el-option>
                                <el-option label="事业单位" value="2"></el-option>
                                <el-option label="国有企业" value="3"></el-option>
                                <el-option label="集体企业" value="4"></el-option>
                                <el-option label="外资企业私营企业" value="5"></el-option>
                                <el-option label="公益性岗位" value="6"></el-option>
                                <el-option label="自由职业" value="7"></el-option>
                                <el-option label="创业" value="7"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证书编号：" prop="E026">
                            <el-input v-model="ruleForm.E026" id="E026" placeholder="证书编号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                         <el-form-item label="孤老情况：" prop="E020">
                            <el-radio-group v-model="ruleForm.E020">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="孤儿情况：" prop="E021">
                            <el-radio-group v-model="ruleForm.E021">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                         <el-form-item class="select2" label="供养情况：" prop="E022">
                            <el-select v-model="ruleForm.E022" placeholder="供养情况">
                                <el-option label="分散" value="1"></el-option>
                                <el-option label="集中" value="2"></el-option>
                                <el-option label="无" value="3"></el-option>
                            </el-select>               
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="供养单位：" prop="E023">
                            <el-input v-model="ruleForm.A003" id="E023" placeholder="请输入供养单位"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                         <el-form-item label="是否是持证人：" prop="E025">
                            <el-radio-group v-model="ruleForm.E025">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="优抚待遇情况：" prop="E028">
                            <el-radio-group v-model="ruleForm.E028">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                         <el-form-item class="select2" label="享受待遇情况：" prop="E029">
                            <el-select v-model="ruleForm.E029" placeholder="享受待遇情况">
                                <el-option label="定期抚恤金" value="1"></el-option>
                                <el-option label="定期生活补助金" value="2"></el-option>
                                <el-option label="无" value="3"></el-option>
                            </el-select>               
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item class="select2" label="待遇证件：" prop="E030">
                            <el-select v-model="ruleForm.E030" placeholder="待遇证件">
                                <el-option label="原件" value="1"></el-option>
                                <el-option label="证明材料" value="2"></el-option>
                            </el-select>               
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="待遇证件名称：" prop="E031">
                            <el-input v-model="ruleForm.E031" id="E031" placeholder="请输入待遇证件名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="待遇证件号码：" prop="E032">
                            <el-input v-model="ruleForm.E032" id="E032" placeholder="请输入待遇证件号码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                         <el-form-item label="是否随军：" prop="E034">
                            <el-radio-group v-model="ruleForm.E034">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-col :span="8" style="text-align:right;">证书照片：</el-col>
                        <el-col :span="16">
                            <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-col>
                    </el-col>
                    <el-col :span="12">
                        <el-col :span="8" style="text-align:right;">待遇证件照片：</el-col>
                        <el-col :span="16">
                            <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview2"
                                :on-remove="handleRemove2">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible2">
                                <img width="100%" :src="dialogImageUrl2" alt="">
                            </el-dialog>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            dialogImageUrl2: '',
            dialogVisible2: false,
            ruleForm: { //默认数据
                E007:'',//现单位性质(含离退休前)
                E020:'',//孤老情况
                E021:'',//孤儿情况
                E022:'',//供养情况
                E023:'',//供养单位
                E026:'',//证书编号
            },
            rules: {  //规则
                E004: [
                    { type: 'date', required: true, message: '请选择安置日期', trigger: 'change' }
                ],
                E012: [
                    { type: 'date', required: true, message: '请选择接收时间', trigger: 'change' }
                ],
                E007:[
                    { required: true, message: '请选择现单位性质(含离退休前)', trigger: 'change' }
                ],
                E019:[
                    { required: true, message: '请选择文化程度', trigger: 'change' }
                ],
                E020:[
                    { required: true, message: '请选择孤老情况', trigger: 'change' }
                ],
                E021:[
                    { required: true, message: '请选择孤儿情况', trigger: 'change' }
                ],
                E022:[
                    { required: true, message: '请选择文化程度', trigger: 'change' }
                ],
                E026:[
                    { required: true, message: '请选择文化程度', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('成功，tuiyishibing!');
                    console.log(this.ruleForm)
                    this.$emit('submitfn',2)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //上传
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //上传
        handleRemove2(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview2(file) {
            this.dialogImageUrl2 = file.url;
            this.dialogVisible2 = true;
        },
    },
    components:{
        
    }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
</style>